<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          icon="el-icon-search"
          type="primary"
          @click="handleCurrentChange(1)"
          size="mini">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
        <el-popconfirm title="这是确定批量删除吗？" @confirm="handleDeleteSelected()">
        <el-button
          type="danger"
          slot="reference"
          style="float:right;margin-right:15px"
          :disabled="delBtnStatus"
          size="mini">
          批量删除
        </el-button>
        </el-popconfirm>
      </div>

      <div style="margin-top: 15px">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            v-model="pagination.queryParams.name"
            placeholder="岗位名称"
            clearable>
          </el-input>
        </el-form-item>

        <el-form-item label="公司">
          <el-select v-model="pagination.queryParams.companyId" placeholder="请根据公司进行查询">
            <el-option :key="item.id" v-for="(item,index) in companyList" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>


      </el-form>
      </div>
    </el-card>
    <div class="table-container">
    <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%;"
      v-loading="listLoading" border
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>


      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="岗位描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        align="center"
        label="职位名称"
        width="120">
      </el-table-column>


      <el-table-column
        prop="address"
        align="center"
        label="岗位工作地"
        width="120">
      </el-table-column>



      <el-table-column
        prop="education"
        align="center"
        label="受教育程度"
        width="120">
      </el-table-column>

      <el-table-column
        prop="experience"
        align="center"
        label="工作经验"
        width="120">
      </el-table-column>

      <el-table-column
        prop="salary"
        align="center"
        label="薪资"
        width="120">
      </el-table-column>

      <el-table-column
        prop="count"
        align="center"
        label="招聘人数"
        width="120">
      </el-table-column>

      <el-table-column
        prop="companyName"
        align="center"
        label="公司"
        width="120">
      </el-table-column>


      <el-table-column
        prop="created"
        align="center"
        width="200"
        label="创建时间">
        <template slot-scope="scope">{{scope.row.created | formatDateTime}}</template>
      </el-table-column>

      <el-table-column
        prop="icon"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateDialog(scope.row)">编辑</el-button>
          <el-button  type="danger" icon="el-icon-delete"  size="mini" slot="reference" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
    <!--展示表格-->
    </div>
    <div class="pagination-container">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total,sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--修改职位对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :before-close="handleEditFormClose">
      <el-form :model="formData" :rules="rule" ref="dataEditForm">
        <el-form-item label="职位名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="受教育程度"  prop="education" label-width="100px">
          <el-input v-model="formData.education" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资"  prop="salary" label-width="100px">
          <el-input v-model="formData.salary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位描述" prop="description" label-width="100px">
          <el-input type="textarea"  v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="招聘人数"  prop="count" label-width="100px">
          <el-input v-model="formData.count" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位工作地点"  prop="address" label-width="100px">
          <el-input v-model="formData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改职位对话框-->




  </div>
</template>

<script>
import {deletePost,deleteByBatch,update,findById,findByPage} from '@/api/post';
import {findAll} from '@/api/company';
import {formatDate} from '@/utils/date';

//分页数据模型
const defaultPagination = {
  currentPage: 1,
  pageSize:10,
  total:0,
  queryParams:{
    name:null,
    companyId:null
  }
};

//默认的表单
const defaultPost = {
  id: null,
  name: null,
  education: null,
  experience: null,
  salary: null,
  description: null,
  count: null,
  status: null,
};


export default {

  name: "index",
  data() {
    return {
      pagination: Object.assign({}, defaultPagination),
      listLoading: false,//列表加载
      companyList:[],//公司列表
      dataList: [],//当前页要展示的分页列表数据
      formData: Object.assign({}, defaultPost),//表单数据
      dialogFormVisible4Edit:false,//编辑表单是否可见
      dialogFormVisible: false,//查看职位详情框是否可见
      delBtnStatus:true,//批量删除标识
      multipleSelection: [], //选中项数据的数组
      rule: {
        name: [{required: true, message: '职位名称不能为空', trigger: 'blur'}],
        education: [{required: true, message: '受教育程度不能为空', trigger: 'blur'}],
        experience: [{required: true, message: '工作经历不能为空', trigger: 'blur'}],
        salary: [{required: true, message: '薪资不能为空', trigger: 'blur'}],
        description: [{required: true, message: '职位描述不能为空', trigger: 'blur'}],
        count: [{required: true, message: '职位人数不能为空', trigger: 'blur'}],
        address: [{required: true, message: '职位工作地不能为空', trigger: 'blur'}],
        status: [{required: true, message: '招聘状态不能为空', trigger: 'blur'}],
      },//表单的校验规则

    }
  },
  created() {
    this.findPage()
    this.findCompanyList()

  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    //处理搜索重置
    handleResetSearch() {
      this.pagination.queryParams={}
    },

    //处理删除的方法
    handleDelete(row) {
      //弹出删除对话框
      this.$confirm(`此操作将【永久删除】该${row.name}职位, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //发送请求，携带row.id
        deletePost(row.id).then(res=>{
          //弹出成功提示框，显示成功信息
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });
        })

      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },

    //处理表格勾选
    handleSelectionChange(val) {
      //获取用户勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },


    //处理批量删除
    handleDeleteSelected(){
      //定义一个删除ID的数组容器
      const ids = []
      //遍历multipleSelection，取出ID，给到容器
      for (const item of this.multipleSelection) {ids.push(item.id)}
      deleteByBatch(ids).then(res => {
        //弹出成功提示框，显示成功信息
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.handleCurrentChange(1)
          }
        });
      })

    },

    //弹出编辑窗口的方法
    handleUpdateDialog(row) {
      console.info("【====系统正在弹出的修改职位信息窗口====】")
      //清空表单项
      this.resetForm();
      //弹出编辑窗口
      this.dialogFormVisible4Edit = true;
      findById(row.id).then(res=>{
        //赋值给表单数据模型
        this.formData = res.data;
      })
      console.info(`====【系统正在弹出的修改职位信息窗口成功！！并成功获取了ID为：${row.id}的职位信息详情=====`)

    },

    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改职位....】")
        if (valid) { //校验成功
          update(this.formData).then(res=>{
            //弹出成功框，显示成功信息
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1)
              }
            });

            //关闭修改窗口。
            this.dialogFormVisible4Edit = false

            //刷新列表数据
            this.handleCurrentChange(1);
            console.info("【系统成功修改职位....】")
          })

        }
      });
    },

    //重置表单的方法
    resetForm() {
      this.formData = {}
    },


    //关闭修改表单窗口的方法
    handleEditFormClose(){
      //关闭修改表单对话框
      this.dialogFormVisible4Edit = false
      //设置表单数据模型为空
      this.resetForm();
    },


    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      //刷新表格
      this.findPage()
    },

    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      //刷新表格
      this.findPage()
    },


    //处理分页查询的方法
    findPage() {
      console.log("===系统正在进行分页查询职位信息====")
      this.listLoading = true;
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
        this.listLoading = false;
      })
      console.log("===系统分页查询职位信息成功！====")


    },

    //查询全部公司的方法
    findCompanyList(){
      console.log("===系统正在查询全部公司====")
      findAll().then(res=>{this.companyList = res.data})
      console.log("===系统查询全部公司成功！！====")
    },


    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },



  }
}
</script>

<style scoped>

</style>
